<script setup>
  //
</script>

<template>
  <view class="custom-tabs">
    <view class="custom-tabs-bar active">
      <text class="tabbar-text">关注</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">推荐</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">护肤</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">减脂</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">饮食</text>
    </view>
    <view class="custom-tabs-cursor"></view>
  </view>
</template>

<style lang="scss">
  // 自定义tabbar
  .custom-tabs {
    display: flex;
    position: relative;
    padding: 0 30rpx;
  }

  .custom-tabs-bar {
    height: 80rpx;
    line-height: 80rpx;
    color: #979797;
    padding-right: 30rpx;
    position: relative;

    &.active {
      color: #121826;
      font-weight: 500;
    }
  }

  .tabbar-text {
    font-size: 30rpx;
  }

  .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;

    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: #2cb5a5;
    transition: all 0.3s ease-out;
  }
</style>
